<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-11 10:34:24
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-22 22:10:52
 * @FilePath: /vue-admin/src/views/assessment/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="assessment">
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="开始日期:">
          <el-date-picker v-model="value1" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange" popper-class="form-data-ccc" />
        </el-form-item>

        <el-form-item label="挑战项目:">
          <el-select v-model="formAssessment.challengeProject" size="mini">
            <el-option label="全部" :value="null" />
            <el-option v-for="(item, index) in challenges" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="挑战结果:">
          <el-select v-model="formAssessment.assess" size="mini" placeholder="请选择考核结果">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="结束日期:">
          <el-date-picker v-model="value2" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange1" popper-class="form-data-ccc" />
        </el-form-item>

        <!-- <el-form-item label="账户类型:">
          <el-select v-model="formAssessment.accountType" size="mini" placeholder="请选择账户模式">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in AccountType" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item> -->

        <el-form-item label="交易账号:">
          <el-input v-model="formAssessment.accountNumber" size="mini" />
        </el-form-item>
        <el-form-item label="挑战人:">
          <el-input v-model="formAssessment.userName" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="subimit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column prop="accountType" align="center" label="账户类型">
          <template v-slot="{ row }">
            <span v-if="row.accountType === 0">外汇</span>
            <span v-if="row.accountType === 1">美股</span>
            <span v-if="row.accountType === 2">期货</span>
          </template>
        </el-table-column>
        <el-table-column prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="pattern"-->
        <!--            align="center"-->
        <!--            label="账户模式"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <div v-for="item in Account" :key="item.id">-->
        <!--              <span v-if="row.pattern === item.id">{{ item.name }} </span>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="stage" align="center" label="所属阶段">
          <template v-slot="{ row }">
            <div v-for="item in PhaseList1" :key="item.id">
              <span v-if="row.stage === item.id">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="expansionPlan" align="center" label="扩展计划">
          <template v-slot="{ row }">
            <span v-if="row.expansionPlan === 0">Level 0</span>
            <span v-if="row.expansionPlan === 1">Level 1</span>
            <span v-if="row.expansionPlan === 2">Level 2</span>
            <span v-if="row.expansionPlan === 3">Level 3</span>
            <span v-if="row.expansionPlan === 4">Level 4</span>
            <span v-if="row.expansionPlan === 5">Level 5</span>
            <span v-if="row.expansionPlan === 6">Level 6</span>
            <span v-if="row.expansionPlan === 7">Level 7</span>
            <span v-if="row.expansionPlan === 8">Level 8</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountNumber" align="center" label="交易账号" width="120px">
          <template #header>
            <div class="box">
              <li>交易账号</li>
              <p>
                <span @click="sortU('account_number', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('account_number', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" />
        <el-table-column prop="userbalance" align="center" width="120px" label="账户余额" />
        <el-table-column prop="username" align="center" label="挑战人" width="120px" />
        <el-table-column prop="emails" align="center" label="邮箱" width="180" />
        <!--        <el-table-column-->
        <!--            prop="accountmoney"-->
        <!--            align="center"-->
        <!--            label="操盘金额"-->
        <!--        />-->
        <el-table-column prop="platform" align="center" label="平台" width="100">
          <template v-slot="{ row }">
            <span v-if="row.platform === 0">MT4</span>
            <span v-if="row.platform === 1">MT5</span>
            <span v-if="row.platform === 2">cTrader</span>
            <span v-if="row.platform === 3">PoolTrader</span>
          </template>
        </el-table-column>
        <el-table-column prop="beginTime" align="center" label="开始日期" width="160" />
        <el-table-column prop="overtTime" align="center" label="结束日期" width="160">
          <template #header>
            <div class="box">
              <li>结束日期</li>
              <p>
                <span @click="sortU('overt_time', 1)">
                  <svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12" height="12"
                    fill="#909399">
                    <path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z" p-id="2640"></path>
                  </svg>
                </span>
                <span @click="sortD('overt_time', 2)">
                  <svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12" fill="#909399">
                    <path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
                  </svg>
                </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="assessmentDays" align="center" label="挑战天数" width="120" />

        <el-table-column prop="assess" width="100" align="center" label="挑战结果">
          <template v-slot="{ row }">
            <div v-for="item in options" :key="item.id">
              <span v-if="row.assess === item.id">{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="inputter" width="100" align="center" label="账号负责人" />
        <el-table-column width="100" align="center" label="数据分析">
          <template v-slot="{ row }">
            <!-- https://bsatrader.com/admin/assess/importCSV -->
            <el-upload :show-file-list="false" :on-success="handleSuccess" class="upload-demo" :data="{ id: row.id }"
              :headers="header" :action="basePathAdmin + '/assess/importCSV'" accept=".csv">
              <el-button size="small" type="primary"
                :style="{ background: (row.dataAnalysis === 0) ? '' : '#475e76', border: (row.dataAnalysis === 0) ? '' : '1px solid #475e76' }">{{
                  row.dataAnalysis === 0 ? '未上传' : row.dataAnalysis === 1 ? '人工上传' : row.dataAnalysis === 2 ? '系统上传' :
                    '' }}</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
      <paging :page-size="formAssessment.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import { Account, AccountType, challenges, PhaseList1, modifyTimeToEndOfDay } from '@/utils'
import { getAssessmentList } from '@/api/assessment'
import paging from '@/components/paging.vue'
import { getChallengeProject } from '@/api/Tradingacct'
import Cookies from "js-cookie";
import { TOKEN_KEY } from "@/constants/KEY";
import baseData from '@/baseData'
export default {
  name: 'VueAdminIndex',
  components: {
    paging
  },
  data() {
    return {
      basePathAdmin:baseData.basePathAdmin,
      header: {
        Authentication: Cookies.get(TOKEN_KEY)
      },
      value1: [],
      value2: [],
      // 考核结果
      options: [
        { id: null, name: '全部' },
        { id: 1, name: '考核失败' },
        { id: 2, name: '考核中' },
        { id: 3, name: '考核成功' },
        { id: 4, name: '放弃考核' },
        { id: 5, name: '比赛通过' },
      ],

      KCSS: [],
      tableData: [
        {
          assess: 1,
          pattern: 0,
          stage: 0
        }

      ],
      total: 0,
      formAssessment: {
        accountNumber: null,
        assess: null,
        userName: null,
        page: 1,
        pageSize: 10,
        // pattern: null,
        challengeProject: null, // 挑战项目
        accountType: null, // 账户类型
        beginTime: null,
        endTime: null,
        overBeginTime: null,
        overEndTime: null,
        sortField: null,  // 排序的字段
        sortOrder: null   // 排序的方向
      }
    }
  },
  computed: {
    Account() {
      return Account
    },
    PhaseList1() {
      return PhaseList1
    },
    AccountType() {
      return AccountType
    },
    challenges() {
      return challenges
    }
  },

  mounted() {
    this.getAssessmentListArr()
    this.getChallengeProjectlist()
  },

  methods: {
    // 挑战项目
    async getChallengeProjectlist() {
      const data = await getChallengeProject()
      // console.log('data',data);
      this.KCSS = data
    },

    async getAssessmentListArr() {
      console.log(this.formAssessment)
      const data = await getAssessmentList(this.formAssessment)
      this.tableData = data.records
      this.total = data.total
    },
    // 查询表单
    subimit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        console.log(this.formAssessment.userName, '11')
        this.formAssessment.page = 1
        this.getAssessmentListArr()
      }, 100)
    },
    handleDateChange() {
      if (this.value1 !== null) {
        this.value1[1] = modifyTimeToEndOfDay(this.value1[1])
        this.formAssessment.beginTime = this.value1[0]
        this.formAssessment.endTime = this.value1[1]
      } else {
        this.formAssessment.beginTime = ''
        this.formAssessment.endTime = ''
      }
    },

    handleDateChange1() {
      if (this.value2 !== null) {
        this.value2[1] = modifyTimeToEndOfDay(this.value2[1])
        this.formAssessment.overBeginTime = this.value2[0]
        this.formAssessment.overEndTime = this.value2[1]
      } else {
        this.formAssessment.overBeginTime = ''
        this.formAssessment.overEndTime = ''
      }
    },
    // 后期要改
    handleSizeChange(val) {
      this.formAssessment.pageSize = val
      // 处理分页大小改变的逻辑
      this.getAssessmentListArr()
    },
    handleCurrentChange(val) {
      this.formAssessment.page = val
      // 处理当前页码改变的逻辑
      this.getAssessmentListArr()
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 文件上传成功
     * @date 2024/3/11
     */
    handleSuccess() {
      this.getAssessmentListArr()
      this.$message({
        type: 'success',
        message: '导入成功'
      })
    },
    // 升序  
    sortU(item, type) {
      this.formAssessment.sortField = item
      this.formAssessment.sortOrder = type
      this.getAssessmentListArr()
    },
    // 降序
    sortD(item, type) {
      this.formAssessment.sortField = item
      this.formAssessment.sortOrder = type
      this.getAssessmentListArr()
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;

  li {
    list-style: none;
  }

  p {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    padding: 0;
    height: 23px;

    span {
      height: 8px;
      display: flex;
    }
  }
}

@media (max-width:768px) {

  .el-form-item {
    display: flex;


  }
}
</style>
